﻿<!doctype html>
<html class="no-js " lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
<meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
<meta name="description" content="Responsive Bootstrap 4 and web Application ui kit.">
<title>系统管理员用户界面</title>
<link rel="icon" href="favicon.ico" type="image/x-icon"> <!-- Favicon-->
<link rel="stylesheet" href="assets/plugins/bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" href="assets/plugins/jvectormap/jquery-jvectormap-2.0.3.min.css"/>
<link rel="stylesheet" href="assets/plugins/morrisjs/morris.min.css" />
<link rel="stylesheet" href="assets/css/main.css">
<link rel="stylesheet" href="assets/css/color_skins.css">
<link rel="stylesheet" href="assets/plugins/jquery-datatable/dataTables.bootstrap4.min.css">
<link rel="stylesheet" href="/managesystem/layui/css/layui.css">
    <style>
        .add_User{
            width: 80px;
            height: 28px;
            background: #fff;
            border: 1px solid #ccc;
            border-radius: 3px;
            float: right;
            margin-right: 5px;
            margin-top: -13px;
            font-size: 12px;
        }
        .add_Inp_box{
            padding-left: 30px;
            height: 125px;
            padding-top: 35px;
            background: #e2e0e0;
            display: none;
        }
        .add_Inp{

        }
        .add_Name{
            margin-right: 50px;
        }
        .add_Btn,.noAdd_Btn{
            width: 80px;
            height: 30px;
            background: #fff;
            border: 1px solid #ccc;
            border-radius: 3px;
            margin-top: -13px;
            font-size: 12px;
        }
        .add_Btn{
            margin-left: 60px;
            margin-top: 15px;
        }
        .noAdd_Btn{
            margin-left: 20px;
        }
        .caozuoBox{
            position: relative;
            cursor: pointer;
        }
        .caozuo{
            width: 100%;
            height: 93px;
            margin: auto;
            border: 1px solid #CCC;
            border-radius: 2px;
            text-align: center;
            position: absolute;
            top: 30px;
            background: #fff;
            z-index: 9;
            line-height: 32px;
            right:0;
            letter-spacing: 5px;
            display: none;

        }
        .caozuo span{
            display: inline-block;
            width: 100%;
            height: 30px;
            cursor: pointer;
            border-bottom: 1px solid #ccc;
        }
        .showHid{
            display: none;
        }
        .userInfo_show{
            position: fixed;
            top: 0;
            height: 380px;
            background: #d8d8d8;
            width: 80%;
            margin: auto;
            padding: 80px;
        }
        .userInfo_show button{
            float: right;
            background: #1e51e6;
            color: #fff;
            border: 1px solid #ccc;
            width: 70px;
            height: 30px;
        }
    </style>
</head>
<body class="theme-purple">
<!-- Page Loader -->
<div class="page-loader-wrapper">
    <div class="loader">
        <div class="m-t-30"><img class="zmdi-hc-spin" src="assets/images/logo.svg" width="48" height="48" alt="Oreo"></div>
        <p>Please wait...</p>        
    </div>
</div>
<!-- Overlay For Sidebars -->
<div class="overlay"></div>

<!-- Top Bar -->
<nav class="navbar p-l-5 p-r-5"style="height: 60px">
    <ul class="nav navbar-nav navbar-left">
        <li>
            <div class="navbar-header" >
                <a href="javascript:void(0);" class="bars"></a>
                <a class="navbar-brand" href="index_1.html" style="margin-top: 15px;"><img src="assets/images/logo.svg" width="30" alt="Oreo"><span class="m-l-10">系统管理员用户界面</span></a>
            </div>
        </li>
    </ul>
</nav>

<!-- Left Sidebar -->
<aside id="leftsidebar" class="sidebar">
    <ul class="nav nav-tabs">
        <li class="nav-item"><a class="nav-link active" data-toggle="tab" href="#dashboard"><i class="zmdi zmdi-home m-r-5"></i>物业管理</a></li>
        <li class="nav-item"><a class="nav-link" data-toggle="tab" href="#user"><i class="zmdi zmdi-account m-r-5"></i>1234</a></li>
    </ul>
    <div class="tab-content">
        <div class="tab-pane stretchRight active" id="dashboard">
            <div class="menu">
                <ul class="list">
                    <li>
                        <div class="user-info">
                            <div class="image"><a href="#"><img src="assets/images/profile_av.jpg" alt="User"></a></div>
                            <div class="detail">
                                <h4 class="user_Name">1234</h4>
                                <small>物业管理员</small>
                            </div>
                            <a title="facebook" href="#"><i class="zmdi zmdi-facebook"></i></a>
                            <a title="twitter" href="#"><i class="zmdi zmdi-twitter"></i></a>
                            <a title="instagram" href="#"><i class="zmdi zmdi-instagram"></i></a>                            
                        </div>
                    </li>
                    <li class="header">主菜单</li>
                    <li class="active open"> <a href="javascript:void(0);" class="menu-toggle"><i class="zmdi zmdi-home"></i><span>人事管理</span></a>
                        <ul class="ml-menu">
                            <li class="active staff_manage"><a href="#">员工信息</a> </li>
                        </ul>
                    </li>
                    <li> <a href="javascript:void(0);" class="menu-toggle"><i class="zmdi zmdi-apps"></i><span>住户管理</span> </a>
                        <ul class="ml-menu">
                            <li class="ownerInfo"><a href="#">住户基本信息维护</a></li>
                        </ul>
                    </li>
                    <li> <a href="javascript:void(0);" class="menu-toggle"><i class="zmdi zmdi-swap-alt"></i><span>投诉管理</span> </a>
                        <ul class="ml-menu">
                            <li class="complain_manage"> <a href="#">投诉管理</a> </li>
                        </ul>
                    </li>
                    <li> <a href="javascript:void(0);" class="menu-toggle"><i class="zmdi zmdi-apps"></i><span>报修管理</span> </a>
                        <ul class="ml-menu">
                            <li class="repair_manage"> <a href="#">报修管理</a> </li>
                        </ul>
                    </li>
                    <li> <a href="javascript:void(0);" class="menu-toggle"><i class="zmdi zmdi-shopping-cart"></i><span>停车管理</span> </a>
                        <ul class="ml-menu">
                            <li class="park_manage"> <a href="#">停车管理</a> </li>
                        </ul>
                    </li>
                    <li> <a href="javascript:void(0);" class="menu-toggle"><i class="zmdi zmdi-swap-alt"></i><span>设备管理</span> </a>
                        <ul class="ml-menu">
                            <li class="equipment_manage"> <a href="#">设备管理</a> </li>
                        </ul>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</aside>

<!-- Main Content -->
<section class="content home">
    <div class="block-header">
        <div class="row">
            <div class="col-lg-5 col-md-5 col-sm-12">
                <h2 style="color: #fff;" class="adminName"></h2>
                <small style="color: #fff;">欢迎使用XX小区物业管理信息系统</small>
            </div>
        </div>
    </div>
    <div class="card weather">
        <div class="header">
            <h2><strong>天气</strong></h2>
        </div>
        <div class="body">
            <div class="city">
                <span>晴空万里</span>
                <h3 class="city_Name"></h3>
                <img src="assets/images/weather/summer.svg" alt="">
            </div>
            <ul class="row days list-unstyled m-b-0">
                <li>
                    <h5>周一</h5>
                    <img src="assets/images/weather/sky.svg" alt="">
                    <span class="degrees">5℃</span>
                </li>
                <li>
                    <h5>周二</h5>
                    <img src="assets/images/weather/rain.svg" alt="">
                    <span class="degrees">5℃~</span>
                </li>
                <li>
                    <h5>周三</h5>
                    <img src="assets/images/weather/summer.svg" alt="">
                    <span class="degrees">5℃</span>
                </li>
                <li>
                    <h5>周四</h5>
                    <img src="assets/images/weather/summer.svg" alt="">
                    <span class="degrees">5℃</span>
                </li>
                <li>
                    <h5>周五</h5>
                    <img src="assets/images/weather/cloudy.svg" alt="">
                    <span class="degrees">5℃</span>
                </li>
                <li>
                    <h5>周六</h5>
                    <img src="assets/images/weather/summer.svg" alt="">
                    <span class="degrees">5℃</span>
                </li>
                <li>
                    <h5>周日</h5>
                    <img src="assets/images/weather/cloudy.svg" alt="">
                    <span class="degrees">5℃</span>
                </li>
            </ul>
        </div>
    </div>
    <!--员工列表-->
    <div class="container-fluid info_Table staff_manage_table" style="display: none">
        <div class="row clearfix">
            <div class="col-lg-12">
                <div class="card">
                    <div class="header">
                        <h2><strong>员工列表</strong></h2>
                        <button class="add_User">添加员工</button>
                    </div>
                    <div class="add_Inp_box">
                        <div class="add_Inp">
                            新增员工姓名： <input type="text" class="add_Name">
                            新增员工密码： <input type="text" class="add_Pass">
                            <div style="height: 50px;text-align: right;padding-right: 70px;">
                                <button class="add_Btn">确定</button>
                                <button class="noAdd_Btn">取消</button>
                            </div>
                        </div>
                    </div>
                    <div class="body">
                        <div class="table-responsive" style="height: 350px">
                            <table class="table table-bordered table-striped table-hover js-basic-example dataTable">
                                <thead style="display:none;">
                                <tr>
                                    <th>业主姓名</th>
                                    <th>业主房间号</th>
                                    <th>联系方式</th>
                                    <th>操作</th>
                                </tr>
                                </thead>
                                <tbody class="addStaffList">
                                <tr>
                                    <th>员工姓名</th>
                                    <th>员工性别</th>
                                    <th>联系方式</th>
                                    <th>员工职责</th>
                                    <th>操作</th>
                                </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!--业主列表-->
    <div class="container-fluid info_Table ownerInfo_table" style="display: none">
        <div class="row clearfix">
            <div class="col-lg-12">
                <div class="card">
                    <div class="header">
                        <h2><strong>业主列表</strong></h2>
                        <button class="add_User">新增用户</button>
                    </div>
                    <div class="add_Inp_box">
                        <div class="add_Inp">
                            新增用户名： <input type="text" class="add_Name">
                            新增用户密码： <input type="text" class="add_Pass">
                            <div style="height: 50px;text-align: right;padding-right: 70px;">
                                <button class="add_Btn">确定</button>
                                <button class="noAdd_Btn">取消</button>
                            </div>
                        </div>
                    </div>
                    <div class="body">
                        <div class="table-responsive" style="height: 350px">
                            <table class="table table-bordered table-striped table-hover js-basic-example dataTable">
                                <thead style="display:none;">
                                <tr>
                                    <th>业主姓名</th>
                                    <th>业主房间号</th>
                                    <th>联系方式</th>
                                    <th>操作</th>
                                </tr>
                                </thead>
                                <tbody class="addUserList">
                                <tr>
                                    <th>业主姓名</th>
                                    <th>业主房间号</th>
                                    <th>联系方式</th>
                                    <th>操作</th>
                                </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!--停车列表-->
    <div class="container-fluid info_Table parkInfo_table" style="display: none">
        <div class="row clearfix">
            <div class="col-lg-12">
                <div class="card">
                    <div class="header">
                        <h2><strong>车辆列表</strong></h2>
                        <button class="add_User">新增停车</button>
                    </div>
                    <div class="add_Inp_box">
                        <div class="add_Inp">
                            新增用户名： <input type="text" class="add_Name">
                            新增用户密码： <input type="text" class="add_Pass">
                            <div style="height: 50px;text-align: right;padding-right: 70px;">
                                <button class="add_Btn">确定</button>
                                <button class="noAdd_Btn">取消</button>
                            </div>
                        </div>
                    </div>
                    <div class="body">
                        <div class="table-responsive" style="height: 350px">
                            <table class="table table-bordered table-striped table-hover js-basic-example dataTable">
                                <thead style="display:none;">
                                <tr>
                                    <th>业主姓名</th>
                                    <th>业主房间号</th>
                                    <th>联系方式</th>
                                    <th>操作</th>
                                </tr>
                                </thead>
                                <tbody class="addUserList">
                                <tr>
                                    <th>业主姓名</th>
                                    <th>业主房间号</th>
                                    <th>联系方式</th>
                                    <th>操作</th>
                                </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!--报修列表-->
    <div class="container-fluid info_Table repair_table" style="display: none">
        <div class="row clearfix">
            <div class="col-lg-12">
                <div class="card">
                    <div class="header">
                        <h2><strong>报修设备列表</strong></h2>
                        <button class="add_User">插入报修</button>
                    </div>
                    <div class="add_Inp_box">
                        <div class="add_Inp">
                            新增用户名： <input type="text" class="add_Name">
                            新增用户密码： <input type="text" class="add_Pass">
                            <div style="height: 50px;text-align: right;padding-right: 70px;">
                                <button class="add_Btn">确定</button>
                                <button class="noAdd_Btn">取消</button>
                            </div>
                        </div>
                    </div>
                    <div class="body">
                        <div class="table-responsive" style="height: 350px">
                            <table class="table table-bordered table-striped table-hover js-basic-example dataTable">
                                <thead style="display:none;">
                                <tr>
                                    <th>业主姓名</th>
                                    <th>业主房间号</th>
                                    <th>联系方式</th>
                                    <th>操作</th>
                                </tr>
                                </thead>
                                <tbody class="addUserList">
                                <tr>
                                    <th>业主姓名</th>
                                    <th>业主房间号</th>
                                    <th>联系方式</th>
                                    <th>操作</th>
                                </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!--投诉列表-->
    <div class="container-fluid info_Table complain_table complain_manage_div">
        <div class="row clearfix">
            <div class="col-lg-12">
                <div class="card">
                    <div class="header">
                        <h2><strong>报修设备列表</strong></h2>
                        <button class="add_User">插入报修</button>
                    </div>
                    <div class="add_Inp_box">
                        <div class="add_Inp">
                            报修用户名： <input type="text" class="add_Name">
                            保修描述： <textarea rows="3" cols="20"></textarea>
                            <div style="height: 50px;text-align: right;padding-right: 70px;">
                                <button class="add_Btn">确定</button>
                                <button class="noAdd_Btn">取消</button>
                            </div>
                        </div>
                    </div>
                    <div class="body">
                        <table  id="test1" lay-filter="demo"></table>
                    </div>
                </div>
            </div>
        </div>
    </div>
    
    <!--设备列表-->
    <div class="container-fluid info_Table equipment_table" style="display: none">
        <div class="row clearfix">
            <div class="col-lg-12">
                <div class="card">
                    <div class="header">
                        <h2><strong>设备列表</strong></h2>
                        <button class="add_User">插入设备</button>
                    </div>
                    <div class="add_Inp_box">
                        <div class="add_Inp">
                            新增用户名： <input type="text" class="add_Name">
                            新增用户密码： <input type="text" class="add_Pass">
                            <div style="height: 50px;text-align: right;padding-right: 70px;">
                                <button class="add_Btn">确定</button>
                                <button class="noAdd_Btn">取消</button>
                            </div>
                        </div>
                    </div>
                    <div >
                            <table  id="test" lay-filter="demo"></table>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!--详情弹窗-->
    <div class="container-fluid info_Table userInfo_show" style="display: none;">
        <div class="row clearfix">
            <div class="col-lg-12">
                <p class="name_infoS"></p>
                <p class="homeNu_infoS"></p>
                <p class="phone_infoS"></p>
                <p class="homeStatus_infoS"></p>
                <p class="propertyFree_infoS"></p>
                <p class="waterFree_infoS"></p>
                <button class="closeInfoBtn">关闭</button>
            </div>
        </div>
    </div>
</section>
<!-- Jquery Core Js -->
<script src="assets/bundles/libscripts.bundle.js"></script> <!-- Lib Scripts Plugin Js ( jquery.v3.2.1, Bootstrap4 js) -->
<script src="assets/bundles/vendorscripts.bundle.js"></script> <!-- slimscroll, waves Scripts Plugin Js -->
<script src="assets/js/pages/tables/jquery-datatable.js"></script>
<script src="assets/bundles/mainscripts.bundle.js"></script>
<script src="assets/bundles/datatablescripts.bundle.js"></script>
<script src="assets/plugins/jquery-datatable/buttons/dataTables.buttons.min.js"></script>
<!--<script src="assets/plugins/jquery-datatable/buttons/buttons.bootstrap4.min.js"></script>-->
<script src="assets/plugins/jquery-datatable/buttons/buttons.colVis.min.js"></script>
<script src="assets/plugins/jquery-datatable/buttons/buttons.html5.min.js"></script>
<script src="assets/plugins/jquery-datatable/buttons/buttons.print.min.js"></script>

<script src="assets/js/home.js?c=1.12"></script>
<script src="assets/js/login.js"></script>
<script src="/managesystem/layui/layui.js"></script>
<!--<script src="assets/js/pages/index.js"></script>-->
<script type="text/html" id="barDemo">
  <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="detail">查看</a>
  <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
  <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>
<script type="text/javascript">
var laydate //日期
,laypage //分页
,layer //弹层
,table //表格
,carousel //轮播
,element; //元素操作
$(function(){
	$(".complain_manage_div").hide(); //隐藏  
	//$("#id").show(); //显示  
	layui.config({
		  version: '1522709297490' //为了更新 js 缓存，可忽略
		});
		 
		layui.use(['laydate', 'laypage', 'layer', 'table', 'carousel', 'upload', 'element'], function(){
		  laydate = layui.laydate ;//日期
		  laypage = layui.laypage ;//分页
		  layer = layui.layer ;//弹层
		  table = layui.table ;//表格
		  carousel = layui.carousel; //轮播
		  element = layui.element; //元素操作
		  
		  //向世界问个好
		  layer.msg('Hello World');
		  
		 
		  
		  //执行一个 table 实例
		  table.render({
		    elem: '#test'
		    ,height: 332
		    ,url: '/managesystem/userGuarantee/selectUserGuaranteeList' //数据接口
		    ,page: true //开启分页
		    ,cols: [[ //表头
		      {field: 'guarantee_id', title: 'ID', width:80, sort: true, fixed: 'left'}
		      ,{field: 'guaranteeDesc', title: '用户名', width:80}
		      ,{field: 'userName', title: '性别', width:80, sort: true}
		      ,{field: 'guaranteeState', title: '城市', width:80} 
		    ]]
		  });
		  table.render({
		    elem: '#test1'
		    ,height: 332
		    ,limit:100
		    ,url: '/managesystem/userGuarantee/selectUserGuaranteeList' //数据接口
		    ,page: true //开启分页
		    ,cols: [[ //表头
		      {field: 'guarantee_id', title: 'ID', width:200, sort: true, fixed: 'left'}
		      ,{field: 'guaranteeDesc', title: '用户名', width:200}
		      ,{field: 'userName', title: '性别', width:200, sort: true}
		      ,{field: 'guaranteeState', title: '城市', width:200} 
		      ,{fixed: 'right', width: 165, align:'center', toolbar: '#barDemo'}
		    ]]
		  });
		  function msg(){
			  layer.msg('Hello World');
				
			}
});
});	
function msg(){
	layer.msg('Hello World');
		alert();
	}
</script>
</body>
</html>